<template>
  <div class="app-container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>批量导入员工</span>
      </div>
      <!-- card body -->
      <UploadExcel :before-upload="beforeUpload" :on-success="handleSuccess" />
    </el-card>
  </div>
</template>

<script>
import { formatExcelDate } from '@/utils/index.js'
import { importEmployees } from '@/api/employee.js'
export default {
  methods: {
    beforeUpload (file) {
      console.log('file', file)
      return true // 解析成功时候 返会true才会触发读取成功事件handleSuccess
    },
    async handleSuccess ({ header, results }) {
      // console.log(header, results)
      // console.log('转换为英文键', this.transformChinese(results))
      // 把成功读取的数据转换为 导入员工接口所需要的参数对象
      await importEmployees(this.transformChinese(results))
      // 当导入之后再跳转回去
      this.$router.back()
    },
    /**
     * 封装把 数组中每一个 对象 里的中文键名转换成 请求数据需要英文键名
     * 用映射对象去做
     */
    transformChinese (ary) {
      // 根据数据设计映射表
      const map = {
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 定义一个新数组来替换转换后的数据
      const newAry = []
      ary.forEach(obj => {
        // 拿到对象遍历对象 拿到 keys 和values
        // 准备新对象来保存新的英文键
        const newObj = {}
        for (const key in obj) {
          // 定义 新的英文keys
          const enkey = map[key]
          /**
           * 格式化Excel的时间===>找到对应的的时间键 修改对应的时间
           */
          if (enkey === 'timeOfEntry' || enkey === 'correctionTime') {
            // 把值给格式化再赋值
            newObj[enkey] = formatExcelDate(obj[key], '-')
          } else {
            // 旧值赋给新key
            newObj[enkey] = obj[key]
          }
        }
        // 把新对象追加到新数组中
        newAry.push(newObj)
      })
      // 把新数组返回
      return newAry
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
